<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <script src="../js/轮播图.js"></script>
    <script src="../../../js/jquery-1.10.1.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        .wrap {
            width: 1000px;
            height: 500px;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }

        .wrap .navBar {
            display: flex;
            position: absolute;
            right: 10px;
            bottom: 10px;
            z-index: 999;
        }

        .wrap .navBar li {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            font-size: 0;
            border: 2px solid #333;
            margin: 0 5px;
        }

        .wrap .navBar .active {
            background-color: #6ff;
            color: #fff;
        }

        .main {
            /* position: relative; */
            /* height: 400px; */
            width: max-content;
            position: absolute;
            left: 0;
            top: 0;
        }

        .main>div {
            width: 1000px;
            height: 500px;
            /* opacity: 0; */
            float: left;

        }

        .main img {
            width: 100%;
            height: 100%;
            vertical-align: top;
            transition: all 0.5s;
        }

        .btn {
            position: absolute;
            right: 0px;
            bottom: -40px;
        }

        .left,
        .right {
            width: 40px;
            height: 50px;
            background-color: rgba(0, 0, 0, 0.5);
            font-size: 30px;
            line-height: 50px;
            text-align: center;
            color: #fff;
            cursor: context-menu;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto 0;
            z-index: 3;
        }

        .right {
            right: 0;
        }

        .left:hover,
        .right:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }
    </style>
</head>

<body>
    <div class="wrap">
        <ul class="navBar">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="main">
            <div class="show">
                <img src="../images/1.jpg" alt="">
            </div>
            <div>
                <img src="../images/2.jpg" alt="">
            </div>
            <div>
                <img src="../images/3.webp" alt="">
            </div>
            <div>
                <img src="../images/4.webp" alt="">
            </div>
            <div class="show">
                <img src="../images/1.jpg" alt="">
            </div>
        </div>
        <!-- <button class="btn">去留言</button> -->
        <div class="left"><span>&lt;</span></div>
        <div class="right"><span>&gt;</span></div>
    </div>


</body>
<script>
    var swiperWidth = $(".main div").width();
    var i = 0;
    var timer;
    autoPlay();
    // 点击小圆点
    $(".navBar li").on("click", function () {
        i = $(this).index();
        move();
    });

    // 点击右箭头
    $(".right").on("click", function () {
        i++;
        move();
    });
    // 点击左箭头
    $(".left").on("click", function () {
        i--;
        move();
    });

    // 移入暂停，移出启动
    $(".wrap").hover(function () {
        clearInterval(timer);
    }, function () {
        autoPlay();
    })

    //窗口失焦
    window.onblur = function () {
        clearInterval(timer);
    }

    //窗口获焦
    window.onfocus = function () {
        autoPlay();
    }

    // 自动轮播
    function autoPlay() {
        timer = setInterval(function () {
            i++;
            move();
        }, 2000);
    }

    function move() {
        // 左键
        if (i < 0) {
            $(".main").css({left: -swiperWidth * $(".navBar li").length});
            i = $(".navBar li").length;
            i--;
        }
        // 右键
        if (i > $(".navBar li").length) {
            $(".main").css({left: 0});
            i = 0;
            i++;
        }
        // i >= 4 ? x=0 : x=i  判断如果是第五张 把第一张改为活跃状态
        if (i >= $(".navBar li").length) {
            x = 0;
        } else {
            x = i;
        }
        $(".navBar li").eq(x).addClass("active").siblings().removeClass("active");

        $(".main").stop().animate({left: -swiperWidth * i}, 200, function () {
            if (i >= $(".navBar li").length) {
                $(".main").css({left: 0});
                i = 0;
            }
        });
    }



</script>

</html>